/* rem and em do not depend on html font-size in media queries!
Instead 1 rem = 1 em = 16px */

/************************/
/* BELLOW 470px (Smart Phone) */
/* 470 / 16px = 29.38 */
/************************/

/* @media (max-width: 29.38em) {
  .hero {
    padding: 4rem;
  }
} */

/************************/
/* BELLOW 700px (Much Smaller Tablets) */
/* 704 / 16px = 44 */
/************************/

@media (min-width: 44em) {
  html {
    /* 11px / 16px = 68.75% */
    font-size: 68.75%;
  }

  .heading {
    font-size: 3.6rem;
  }
}

/************************/
/* BELLOW 864px (Smaller Tablets) */
/* 864 / 16px = 54 */
/************************/

@media (min-width: 54em) {
  html {
    /* 13px / 16px = 81.25% */
    font-size: 81.25%;
  }
}

/************************/
/* BELLOW 992px (Tablets) */
/* 992 / 16px = 62 */
/************************/

@media (min-width: 62em) {
  html {
    /* 14px / 16px = 87.5% */
    font-size: 87.5%;
  }

  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-txt-box {
    display: grid;
    align-items: start;
  }

  .heading {
    font-size: 4.4rem;
    text-align: left;
    margin-bottom: 5rem;
  }

  .hero-description {
    text-align: left;
  }

  .hero-paragraph {
    grid-column: 1 / -1;
  }

  .sales-copy-chunk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
  }

  .img-description {
    align-self: end;
  }

  .sales-copy-chunk p {
    align-self: start;
  }

  .city-with-buildings,
  .delivery-person,
  .delivery-van,
  .mobile-app {
    grid-column: 2 / 3;
  }

  /*
  .sctb-2,
  .sctb-4,
  .sctb-6,
  .sctb-8,
  .sctb-10 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  */

  .features {
    justify-self: start;
  }
}

/************************/
/* BELLOW 1200px (Landscape Tablets) */
/* 1200 / 16px = 75 */
/************************/

@media (min-width: 75em) {
  html {
    /* 15px / 16px = 93.75% */
    font-size: 93.75%;
  }

  .section-hero {
    width: 75em;
  }

  .section-sales-copy {
    width: 75em;
  }

  .section-cta {
    width: 75em;
  }
}

/************************/
/* BELLOW 1350px (Smaller Desktops) */
/* 1350 / 16px = 84.375 */
/************************/

/* @media (min-width: 84.375em) {
  .heading-primary {
    font-size: 4.4rem;
  }
} */